<template>
  <div>
    <div class="realtime">
          <p>{{$t('m.home.realtime')}}</p>
          <el-button @click="getRealTimeList('refresh')" type="primary">{{$t('m.home.refresh')}}</el-button>
        </div>
        <div>
          <el-carousel trigger="click" height="200px" :autoplay="false">
            <el-carousel-item>
             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.orderamount')}}</p>
                   <p>{{realTimeList.orderamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="orderfinratio"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{orderfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                      <div slot="content">{{$t('m.home.tips3')}}<br/>{{$t('m.home.tips4')}}<br/>{{$t('m.home.tips5')}}</div>
                      <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unfinished')}}</p>
                   <p>{{realTimeList.orderunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.finished')}}</p>
                   <p>{{realTimeList.orderfinamount}}</p>
                 </div>
              </div>
             </el-card>

             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.waveorderamount')}}</p>
                   <p>{{realTimeList.waveorderamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="waveorderfinratio" status="warning"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{waveorderfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips6')}}<br/>{{$t('m.home.tips7')}}<br/>{{$t('m.home.tips8')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unfinished')}}</p>
                   <p>{{realTimeList.waveorderunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.finished')}}</p>
                   <p>{{realTimeList.waveorderfinamount}}</p>
                 </div>
              </div>
             </el-card>

             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.pickingtaskamount')}}</p>
                   <p>{{realTimeList.pickingtaskamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="pickingtaskfinratio" status="exception"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{pickingtaskfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips9')}}<br/>{{$t('m.home.tips10')}}<br/>{{$t('m.home.tips11')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unpicked')}}</p>
                   <p>{{realTimeList.pickingtaskunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.picked')}}</p>
                   <p>{{realTimeList.pickingtaskfinamount}}</p>
                 </div>
              </div>
             </el-card>

             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.pickingamount')}}</p>
                   <p>{{realTimeList.pickingamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="pickingfinratio" status="success"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{pickingfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips12')}}<br/>{{$t('m.home.tips13')}}<br/>{{$t('m.home.tips14')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unpicked')}}</p>
                   <p>{{realTimeList.pickingunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.picked')}}</p>
                   <p>{{realTimeList.pickingfinamount}}</p>
                 </div>
              </div>
             </el-card>
            </el-carousel-item>

            <el-carousel-item>
             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.sendingamount')}}</p>
                   <p>{{realTimeList.sendingamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="sendingfinratio" status="warning"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{sendingfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips15')}}<br/>{{$t('m.home.tips16')}}<br/>{{$t('m.home.tips17')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.undelivered')}}</p>
                   <p>{{realTimeList.sendingunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.delivered')}}</p>
                   <p>{{realTimeList.sendingfinamount}}</p>
                 </div>
              </div>
             </el-card>
            </el-carousel-item>
          </el-carousel>
        </div>
	</div>
</template>
<script>
export default {
  name:'outbound-realtime-dashboard',
  data(){
    return {
      realTimeList:[],
      orderfinratio:0,
      waveorderfinratio:0,
      pickingtaskfinratio:0,
      pickingfinratio:0,
      sendingfinratio:0
    }
  },
  mounted(){
    this.getRealTimeList()
  },
  methods:{
    // 获取出库实时看板统计
    getRealTimeList(state){
      let options = {
        method:'get',
        url:state?`/homepage/timelystatistics`:`/homepage/getexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.realTimeList = data
        this.orderfinratio = parseFloat(this.realTimeList.orderfinratio)
        this.waveorderfinratio = parseFloat(this.realTimeList.waveorderfinratio)
        this.pickingtaskfinratio = parseFloat(this.realTimeList.pickingtaskfinratio)
        this.pickingfinratio = parseFloat(this.realTimeList.pickingfinratio)
        this.sendingfinratio = parseFloat(this.realTimeList.sendingfinratio)
        if(state) return this.callbackMessage(this.$t('m.home.success'),'success')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 实时看板
.realtime {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 24px;
  }
  .el-button {
    height: 40px;
    margin-right: 24px;
    margin-top: 13px;
  }
}
// 轮播图
.el-carousel {
  margin-top: 18px;
}
.el-carousel__item {
    display: flex;
    .el-card {
      margin-left: 20px;
      height: 180px;
      width: 268px;
    }
    .el-row .el-col p {
      &:nth-child(1) {
        font-size: 14px;
        margin-bottom: 10px;
      }
      &:nth-child(2) {
        font-size: 32px;
      }
    }
}
.circleBox {
  position: relative;
  top: -12px;
  left: 8px;
  text-align: center;
  width: 90px;
  .el-icon-warning-outline {
    font-size: 14px;
    position: absolute;
    right: -28px;
    top: 0;
  }
}
.circleCenter {
  position: absolute;
  top: 31px;
  left: 42px;
}
.el-divider--horizontal {
  margin-top: -5px;
}
.dataBox {
  display: flex;
  justify-content: space-around;
  p {
    margin-left: 12px;
    margin-right: 18px;
    font-size: 15px;
    &:nth-child(1) {
      margin-top: -8px;
      margin-bottom: 5px;
    }
  }
}
.el-divider--vertical {
  height: 35px;
  margin-top: -5px;
}
</style>